<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关的操作 (四种方式 10个属性) 
		    1.控制字体：font-family  font-size  font-weight
		    2.控制文本布局：text-aglin  line-height  letter-spacing  word-spacing
			3.文本的修饰效果: text-decoration(方向)  text-shadow(阴影)   
			4.处理文本的效果: white-space
		-->
		<style>
			/* 对*/    /*  css3的注释*/
		/*  css3语法:  选择器{
			          属性:  属性值；
					  属性:  属性值；
					  ....
		               } 
						叫法:一个样式
		*/
	   bod y div#d1{  /* 通过加权方式，锁定元素  权值: 102 */
		   color: #00ffff;
		   /*  知识点一: 文本格式化属性控制字体
			   font-family: 字体家族,指定字体形式
			*/
		   font-family: 华文彩云,sans-serif;  /* sans-serif-->黑体 */
		   /*  设置多个字体: 浏览器会按照顺序进行寻找可用字体 
			用户体验，用户系统有什么字体，优先指定字体
			通常与通配选择器使用     *{}
			*/
		   /*   知识点二: 文本格式化属性控制字体 
		   font-size: 字体大小属性，与单位属性共存
		   单位  px   像素   使用特点: 绝对值、PC端
		   /em    相对单位  理解: 倍数
		                   使用特点: 相对与父元素按照倍数方式、移动端
		   */
		  /*   知识点三:  文本格式化熟悉控制字体
		  font-height:字体粗细属性，不存在单位
		              属性值: 数值 【100  200  300  ...   900】
					         常用数值: 400
					         单词  【normal=400  bold、light 】
				使用方法: 与通配选择器搭配使用，用于指定全局字体为正常字体粗细			 
		  */
		 font-weight: 900;
		  font-size: 2em;
		  /*  补充: 1. 英文大写；  2.首字母大写；  3.段落开始间距200px  */
		  text-transform: uppercase;
		  text-transform: capitalize;
		  text-indent: 200px;
		  
	   }
	   div#d1{   /*  通过加权方式，锁定元素  权值: 101*/
		   color: #aaaaff;
		   /*  知识点四: 文本格式化属性控制文本格式  【对齐、间隙】
		   text-align:文本的对齐属性  
			left\right\center\justify:两端对齐,用于弹性布局
		   */
		  text-align: justify;
		  
		  /*  知识点五: 文本格式化属性控制文本格式   【对齐、间隙】
		  行高属性:   link-height:文本垂直效果
		  使用方法:  1. 高度属性:  属性值一致
		            2.在高度属性上加行高属性
		  */
		 border: 1px solid red;
		 height: 100px;
		 line-height: 100px;
		 /*  补充: 文本对齐和行高都属于对齐|间隙:  字符和单词之间距离  */
		 /*  知识点六: letter-spacing:  设置字符之间的间隙  
		     知识点七: word-spacing: 设置单词之间间隙
		 */
		lett er-spacing: 2px;
		word-spacing: 10px;
	   }
	   #d1{  /* 权值:100 */
		   color: #23ee6e;
	   }
	   a.c1{   /* 权值: 11 */
		   /*  知识点九:text-decoration: 修饰超链接样式  
		       使用方法: 与通配符一起使用，设置全局页面超链接样式
			   属性值: none(去掉下划线)|underline(下划线)|line-through(删除线)
		   */
		  text-decoration: line-through;
		  
		  /* 知识点九: text-shadow: 修饰文本阴影 
		     属性值: X轴  Y轴  blur模糊距离  color
		  */
		 text-shadow: 5px 5px 5px #aaffff;
		 p{
			 border: 1px solid red;
			 /* 知识点十: 文本换行效果
			 white-space: 文本换行属性
			 属性值:nowrap(不换行，只显示一行，超出部分隐藏)
			 |pre(保存空格和回车)|normal(默认，空格合并，换行隐藏)
			 */
			white-space: nowrap;
			overflow: hidden; /*  截断为一行  */
		 }
	   }
		</style>
	</head>
	<body>
		<!-- 需求:创建div同时指定别名，添加假文【tab】 
		          id选择器，通过加权找到div，添加颜色
		-->
		<div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nulla nihil modi error itaque laboriosam placeat dolores fugiat. Veritatis impedit id porro modi ab quaerat aspernatur cupiditate quia, perspiciatis aperiam?</div>
	    <hr>
	    <h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性:
		 知识点八: text-decoration属性:设置超链接效果
		 -->
		<a class="c1 c2" href="http://www.tsgzy.edu.cn">实现跳转【方式: 6种】</a>
		<div style="height: 500px"></div>
	    <marquee behavior="" direction="">
			<h4>处理文本效果</h4>
			</marquee>   
			<!-- marquee:跑马灯 -->
			<p>Lorem ipsum dolor     sit amet consectetur 
				 adipisicing elit. Quod omnis dolores asperiores harum, 
				 et consectetur voluptate sint ducimus dolorum perspiciatis? Voluptas eius,
				  perferendis commodi eum voluptates fugiat modi dolor cum?  Lorem ipsum dolor
				   sit amet consectetur adipisicing elit. Expedita accusamus quo blanditiis nulla, hic quas, harum officiis adipisci ipsam, iusto sunt perspiciatis rerum?    Quod nulla ipsum laboriosam delectus quidem quo.</p>
	</body>
</html>